<template>
    <div>
        <el-table
            :data="list"
            style="width: 100%;background:#2d3035">
            <el-table-column
                align="center"
                label="序号"
                width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="姓名"
                width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>分类名称: {{ scope.row.name }}</p>
                        <p>所属店铺: {{ scope.row.descriptions }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="创建日期"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createdAt }}</span>
                </template>
            </el-table-column>
            <el-table-column width="240" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row,scope._id)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column
            width="240"
            align="left">
                <template class="sear" slot="header" slot-scope="scope">
                    <el-autocomplete
                        size="mini"
                        class="inline-input"
                        v-model="search"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入关键字搜索"
                        @select="handleSelect"
                        @blur="changeList"
                    ></el-autocomplete>
                </template>
            </el-table-column>
            <el-table-column
            align="center"
            width="213">
                <template class="sear" slot="header" slot-scope="scope">
                    <el-button @click="add()" type="primary" size="mini">新增商品分类</el-button>
                </template>
            </el-table-column>

        </el-table>


        <el-dialog size="mini" title="修改商品分类" :visible.sync="categoryVisible">
          <el-form size="mini" :model="cate">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="cate.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类ID" :label-width="formLabelWidth">
              <el-input v-model="cate._id" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品简介" :label-width="formLabelWidth">
              <el-input v-model="cate.descriptions" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品主图地址" :label-width="formLabelWidth">
              <el-input v-model="cate.coverImg" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="categoryVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog size="mini" title="增加商品分类" :visible.sync="cateVisible">
          <el-form size="mini" :model="cate">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="cate.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品简介" :label-width="formLabelWidth">
              <el-input v-model="cate.descriptions" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品主图地址" :label-width="formLabelWidth">
              <el-input v-model="cate.coverImg" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cateVisible = false">取 消</el-button>
            <el-button type="primary" @click="sub()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import * as api from '@/api/category'
import axios from 'axios'
export default {
    name:'Category',
    data(){
        return{
            title:'商品分类管理',
            name:'',
            coverImg:'',
            descriptions:'',
            list:'',
            cate:{},
            search:'',
            formLabelWidth:'200px',
            categoryVisible:false,
            cateVisible:false,
            restaurants:'',
        }
    },
    methods:{
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf        (queryString.toLowerCase()) === 0);
            };
        },
        loadAll(){
            let arr = []
            this.list.map(v=>{
                let obj = {}
                obj.value = v.name
                obj.address = v.descriptions
                arr.push(obj)
            })
            return arr
        },
        handleSelect(item){
            console.log(item)
            this.changeList()
        },
        changeList(){
            api.categoryList({per:1000}).then(data=>{
                let arr = data.data.categories
                let newArr = []
                arr.map(v=>{
                    v.createdAt = v.createdAt.slice(0,10)
                    if(v.name.indexOf(this.search)!=-1){
                        newArr.push(v)
                    }
                })
                this.list = newArr
            })
            
        },
        handleEdit(row,item){
            console.log(row)
            this.cate = item
            this.categoryVisible=true
        },
        handleDelete(row,item){
            console.log(item)
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                api.categoryDelete(item._id).then(data=>{
                    console.log(data)
                    this.list.splice(row,1)
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        edit(){
            let params = {
                id:this.cate._id,
                name:this.cate.name,
                descriptions:this.cate.descriptions,
                coverImg:this.cate.coverImg
            }
            console.log(params)
            api.categoryUpdated(params).then(data=>{
                this.categoryVisible=false                
            })
            
        },
        add(){
            this.cate = {},
            this.cateVisible = true
        },
        sub(){
            api.addCategory(this.cate).then(data=>{
                api.categoryList({per:1000}).then(res=>{
                    console.log(res.data.categories)
                    this.list = res.data.categories
                    this.list.map(v=>{
                        v.createdAt = v.createdAt.slice(0,10)
                    })
                    this.cateVisible = false
                })
            })
        },
        checkout(){
            console.log(this.search)
        }
    },
    mounted(){
        this.$emit('toparent',this.title)
        api.categoryList({per:1000,page:1}).then(data=>{
            console.log(data)
            this.list = data.data.categories
            this.list.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
            })
            console.log(this.list)
            this.restaurants = this.loadAll();
            console.log(this.restaurants)
        })

    }
}
</script>

<style scoped>
    .el-autocomplete{
        box-sizing: border-box;
        padding-top:16px;
        vertical-align: bottom;
    }
</style>


